<template>
  <div class="home-section pt-88px pb-75px bg-white">
    <div class="mb-50px home-title">行业趋势洞察</div>
    <div class="trend-content flex justify-between">
      <router-link
        :to="{ name: 'NewsDetail', query: { id: mainNews?.id } }"
        target="_blank"
        class="mr-40px block"
      >
        <img
          :src="mainNews?.infoPicUrl"
          alt=""
          class="w-full h-338px object-cover"
        />
        <div class="news is-main">
          <div class="news-title">{{ mainNews?.infoTitle }}</div>
          <div class="news-content">{{ mainNews?.infoSimpleDesc }}</div>
          <span class="news-time">{{
            mainNews?.createTime?.slice(0, 16)
          }}</span>
        </div>
      </router-link>
      <div class="flex flex-col">
        <div class="flex-1 flex flex-col justify-between mb-42px">
          <router-link
            v-for="item in restNews"
            :key="item.id"
            class="news"
            :to="{ name: 'NewsDetail', query: { id: item.id } }"
            target="_blank"
          >
            <div class="flex items-center justify-between">
              <div class="news-title">{{ item.infoTitle }}</div>
              <span class="news-time">{{ item.createTime?.slice(0, 16) }}</span>
            </div>
            <div class="news-content">{{ item.infoSimpleDesc }}</div>
          </router-link>
        </div>
        <More path="/news?type=4" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useNewsList } from "@/hooks";
import More from "./more.vue";

const { list: newsList } = useNewsList({ pageSize: 4, infoType: 4 });

const mainNews = computed(() => {
  return newsList.value[0];
});
const restNews = computed(() => {
  return newsList.value.slice(1);
});
</script>

<style scoped lang="less">
.trend-content {
  width: 95%;
  display: flex;
  justify-content: space-between;

  > div,
  > a {
    flex: 1;
  }
}

.news {
  cursor: pointer;

  &-title {
    width: 100%;
    flex: 1;
    margin-right: 20px;
    margin-bottom: 12px;
    font-size: 20px;
    line-height: 32px;
    color: @text-default;
    transition: color 0.1s ease-in;
    .single-overflow;
  }

  &-content,
  &-time {
    font-size: 14px;
    color: @text-light;
    line-height: 20px;
  }

  &-content {
    .multiline-overflow(3);
  }
}

.is-main {
  .news-title {
    margin-top: 12px;
    margin-bottom: 4px;
  }

  .news-content {
    -webkit-line-clamp: 1;
    margin-bottom: 12px;
  }
}

.news:hover {
  .news-title {
    color: @main-color;
  }
}

/* Mobile styles */
@media screen and (max-width: 768px) {
  .trend-content {
    flex-direction: column;
  }

  .trend-content a {
    margin-bottom: 16px;
  }

  .news {
    &-title {
      font-size: 16px;
      margin-right: 0;
      margin-bottom: 8px;
    }

    &-content,
    &-time {
      font-size: 12px;
    }

    &-content {
      .multiline-overflow(2);
    }
  }

  .trend-content img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
  }
}
</style>

